<template>
	<view class = "main">
		<myheader></myheader>
		<navigator url="/pages/index/index" open-type="reLaunch" >去往主页</navigator>
		<view class = "main-1">五克拉</view>
		<icon :type="value" size="26"/>
		<text :selectable="true">{{text}}</text>
		<scroll-view class="scrool" scroll-x scroll-y>
			 <view class="scrool-1">111</view>
			 <view class="scrool-1">222</view>
			 <view class="scrool-1">333</view>
			 <view class="scrool-1">444</view>
			 <view class="scrool-1">555</view>
			 <view class="scrool-1">555</view>
			 <view class="scrool-1">555</view>
			 <view class="scrool-1">555</view>
		</scroll-view>
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item class="item">
							<image class="img" src="../../static/image/1.jpg" mode="aspectFill"></image>
						</swiper-item>
						<swiper-item class="item">
						    <image class="img" src="../../static/image/2.webp" mode="aspectFill"></image>
						</swiper-item>
						<swiper-item class="item">
							<image class="img" src="../../static/image/3.jpg" mode="aspectFill"></image>
						</swiper-item>
		</swiper>
		<video src="../../static/image/qhh.mp4" autoplay muted></video>
		<button size="default" type="default" 
			style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19" 
			hover-class="is-hover">按钮</button>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				value:'warn',
				text:'这个相当于span标签',
				 background: ['color1', 'color2', 'color3'],
				 indicatorDots: true,
				 autoplay: true,
				 interval: 2000,
			};
		}
	}
</script>

<style lang="scss">
   .main{
	    .main-1{
			 width: 750rpx;
			 height:200rpx;
			 background-color: hotpink;
		}
   }
   .scrool{
	   width: 750rpx;
	   height: 100rpx;
	   border: 1rpx solid red;
	   // display: flex;
	   flex-wrap: no-warp;
	   white-space: nowrap;
	   .scrool-1{
		 //    width: 20%;
			// height: 100%;
			display: inline-block;
			width: 20%;
			height: 200rpx;
			background-color: greenyellow;
			margin-left: 5rpx;
	   }
   }
   .swiper{
	   height: 300rpx;
	    .item{
			 .img{
				  width: 100%;
				  height: 250rpx;
			 }
		}
   }
</style>
